<template>
  <section class="cms-body flex">

    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :hasContent='true'></cms-tree>

    <div class="cms-content-right">

      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <el-tag @click="setTime('today')" :effect="choose==1?'dark':'light'" style="cursor: pointer;">今天</el-tag>
          <el-tag @click="setTime('sevenday')" :effect="choose==2?'dark':'light'" style="cursor: pointer;">近7天</el-tag>
          <el-tag @click="setTime('onemonth')" :effect="choose==3?'dark':'light'" style="cursor: pointer;">近一月</el-tag>
          <el-tag @click="setTime('threemonth')" :effect="choose==4?'dark':'light'" style="cursor: pointer;">近三月</el-tag>
          <el-date-picker v-model="params.startTime" type="date" size="small" placeholder="开始时间" class="cms-width"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker v-model="params.endTime" type="date" placeholder="结束时间" class="cms-width"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-button @click="goQuery()">查询</el-button>
          <el-button @click="exportExcel2()">导出</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
        <el-table-column prop="contentId" label="id" width="50" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="200px" style="margin-left: 100px">
          <div slot-scope="scope" @click="cellClick(scope.row)" style="cursor: pointer" title="点击标题预览">
            <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>
            {{scope.row.title}}
          </div>
        </el-table-column>
        <el-table-column label="序号" width="100" align="center">
          <div slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </div>
        </el-table-column>
        <el-table-column label="访问量（PV）" prop="browseNum" width="200" align="center">
        </el-table-column>
        <el-table-column label="IP数量" prop="ipBrowseNum" width="200" align="center">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="文章预览" :visible.sync="isShowContent" v-if="isShowContent">
      <content-preview :contentId="previewId"></content-preview>
    </el-dialog>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from 'axios'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {
          channelId: '',
          startTime: '',
          endTime: ''
        },
        breadItems: [{name: '根目录', id: ''}], //面包屑
        isShowContent: false,
        modelList: {}, //当前频道信息
        typeList: [], //内容类型接口
        props: {label: 'name', children: 'zones', isLeaf: 'isChild', id: 'id'},
        tableHeight: 500,
        previewId: '',
        isShowDialog: false,
        choose:0
      }
    },
    methods: {
      getChannelId(data, node) {
        //获取频道树点击
        this.creatBread(node, []);
        this.params.channelId = data.id;//传递频道id
        this.params.modelId = data.modelId;//传递模型id
        this.getChannelInfo(data.id); //获取频道信息
        this.getTableData(this.params); //获取内容信息
        if (node.isLeaf) {
          this.showAdd = true;
        } else {
          this.showAdd = false;
        }
      },
      getChannelInfo(channelId) {
        //获取模型信息
        let modelList = [];
        axios.post(this.$api.modelList, {containDisabled: false, hasContent: true}).then(res => {
          if (res.code == '200') {
            modelList = res.body //获取模型
          }
          if (channelId != '' && channelId != undefined) {
            axios.post(this.$api.channelGet, {id: channelId, showTxt: false}).then(res => {
              if (res.body.selfModels.length > 0) {
                this.modelList = res.body.models; //获取模型
              } else {
                this.modelList = modelList;
              }
            })
          } else {
            this.modelList = modelList;
          }
        })
      },
      cellClick(row) {
        this.previewId = row.id;
        this.isShowContent = true;
      },
      setTime(tag) {
        const end = new Date();
        const start = new Date();
        if (tag == "sevenday") {
          // 近7天
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          this.choose = 2;
        } else if (tag == "onemonth") {
          // 近一个月
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.choose = 3;
        } else if (tag == "threemonth") {
          // 近三个月
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          this.choose = 4;
        } else {
          this.choose = 1;
        }
        this.params.startTime = start.format("yyyy-MM-dd");
        this.params.endTime = end.format("yyyy-MM-dd");
        this.goQuery();
      },
      clickBread(id, index) {
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false;
        }
      },
      getExcel: function (res) {
        require.ensure([], () => {
          for (let i in res) {
            let  browseContent= res[i];
            browseContent['index']=Number(i)+1;
          }
          const {export_json_to_excel} = require('../../../vendor/Export2Excel.js')
          const tHeader = ['新闻Id', '频道名称', '新闻标题','序号', '访问量（PV）','IP数量']
          const filterVal = ['contentId', 'channelName', 'title','index', 'browseNum','ipBrowseNum']
          const list = res
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '新闻访问前50表')
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      exportExcel2() {
        this.loading = true;
        this.warningMessage('数据正在处理中');
        axios.post(this.$api.contentBrowseList, this.params).then(res => {
          if (res.code == "200") {
            this.loading = false;
            this.getExcel(res.body)
          }
        }).catch(error => {
          this.loading = false;
        })
      },
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'chart.vue') {
        if (this.$route.query.id == 0) {
          this.params.channelId = ''
        } else {
          this.params.channelId = this.$route.query.id;
        }
      }
      let pageNo = this.$route.query.pageNo;
      if (!this.$myUtils.isNull(pageNo)) {
        this.params.pageNo = pageNo;
      }
      let pageSize = this.$route.query.pageSize;
      if (!this.$myUtils.isNull(pageSize)) {
        this.params.pageSize = pageSize;
      }
      this.initTableData(this.$api.contentBrowseList, this.params) //请求列表
      this.getChannelInfo() //模型列表
    }
    ,
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>
